import React from 'react'
import './style.css'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import 'animate.css'
import LoginForm from './LoginForm'
import './index.less'

@withRouter @inject('appStore') @observer
class Login extends React.Component {
  state = {
    showBox: 'login',
    url: '',
    loading2:false,
  }

  componentDidMount () {
    const isLogin = this.props.appStore
    if(isLogin){
      this.props.history.go(1)
    }
    this.initPage()
  }

  componentWillUnmount () {
    this.particle && this.particle.destory()
  }

  initPage = () => {
    this.setState({
      loading:true
    })
   // this.props.appStore.initUsers()
  }

  render(){
    return (
        <div className="loginpagewrap">
            <div className="box">
                <p className="title"></p>
                <LoginForm />
            </div>
        </div>
    )
  }

  render1() {
    const {showBox} = this.state
    return (
      <div id='login-page'>
        {
            <div>
              <div id='backgroundBox' style={styles.backgroundBox}/>
              <div className='container'>
                <LoginForm
                  className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
                  switchShowBox={this.switchShowBox}/>
              </div>
            </div>
        }
      </div>
    )
  }
}

const styles = {
  backgroundBox: {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100vw',
    height: '100vh',
    // backgroundImage: 'url(https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg5.jpg?raw=true)',
    backgroundImage: 'url(https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg1.jpg?raw=true)',
    backgroundSize: '100% 100%',
    transition:'all .5s'
  },
  focus: {
    // transform: 'scale(0.7)',
    width: '20px',
    opacity: 1
  },
  loadingBox:{
    position:'fixed',
    top:'50%',
    left:'50%',
    transform:'translate(-50%,-50%)'
  },
  loadingTitle:{
    position:'fixed',
    top:'50%',
    left:'50%',
    marginLeft: -45,
    marginTop: -18,
    color:'#000',
    fontWeight:500,
    fontSize:24
  },
}

export default Login
